<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	.active{
	    		width:100px;
	    		height:100px;
	    		border:1px solid olive;
	    	}
	    	.bigBox{
	    		width:200px;
	    		height: 200px;
	    		border:2px solid orangered;
	    	}
	    </style>
	
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script type="text/babel">
		var MyBox =React.createClass({
			//初始化state值
			getInitialState(){
				return{
					aaa:100
				}
			},
			//自定义事件
			add(){
				
				// 错误：  state不能直接被修改！！！
				//     this.state.aaaa++;
				 使用setState方法
				console.log(this.state.aaa)
				var num= this.state.aaa;
				num++;
				this.setState({
					aaa:num
				})
//				this.setState(function(state){
//					
//					return{
//						aaa:state.aaa+1
//					}
//				})
				
//				this.replaceState(function(state){  //replaceState 替换
//					return{
//						ccc:200
//					}
//				})
		},
		getDOM(){
			console.log(this.isMounted())
			
			var span =ReactDOM.findDOMNode(this.refs.demo)
			console.log(span)
		},
		//渲染
		render(){
			console.log(this.isMounted())
			return(
				<div className ="bigBox">
				  <h3 tabIndex="0">
				      {this.props.name}==>{this.props.title}
				  
				  </h3>
				  <h4>{this.state.aaa}</h4>
				  <span ref="demo">666666</span>
				  <button onClick={this.add}>添加</button>
				  <button onClick={this.getDOM}>获取</button>
				
				</div>
				
			)
		}
			
		})
		//渲染   注意组件名首字母要大写
	   var app =document.getElementById("app")
	   ReactDOM.render(<MyBox name="lily" thitle="handsome" />,app)
	   
	</script>
</html>
